<template>
	<view class="my">
		<view class="my-top">
			<!-- 用户 -->
			<view class="user">
				<view class="user-signIn" @click="signIn">签到</view>
				<view class="user-name">
					昵称
				</view>
				<view class="user-occupation">
					调理师
				</view>
			</view>
			<view class="user">
				<image class="user-photo" src="../../static/black.jpg" mode=""></image>
			</view>
		</view>
		<!-- 列表 -->
		<view class="my-main">
			<view class="list" v-for="item in list" :key="item.id">
				<view class="item" @click="goTo(item.url)">
					<image class="icon" :src="item.src" mode="aspectFit" />
					{{ item.label }}
					<image class="image" src="../../static/info/images/info_68_68.jpg" mode="aspectFit" />
				</view>
			</view>
		</view>
		<view class="my-foot">
			<!-- <button class="out-btn" type="default">点击退出</button> -->
			<cl-button class="out-btn" type="info" @click="out">退出登录</cl-button>
		</view>
		<cl-dialog title="签到" :visible.sync="visible">
			<calendar class="calendar" name="calendar" :defaultTime="time" :extraData="extraData" @calendarTap="calendarTap"
			 @monthTap="monthTap" />
		</cl-dialog>
		<tabBar :pagePath="'/pagesB/my/my'" :type='2'></tabBar>

	</view>
</template>

<script>
	import calendar from '../../components/tale-calendar/calendar.vue';
	export default {
		name: "PagesBMy",
		components: {
			calendar
		},
		data() {
			return {
				// 列表
				list: [{
						id: 1,
						url: "/pagesB/my-info/my-info",
						src: "/static/my/wodexinxi.png",
						label: "我的信息",
					},
					{
						id: 2,
						url: "/pagesB/my-estimate/my-estimate",
						src: "/static/my/wodepingjia.png",
						label: "我的评价",
					},
					{
						id: 3,
						url: "/pagesB/my-orderform/my-orderform",
						src: "/static/my/wodedingdan.png",
						label: "我的订单",
					},
					{
						id: 4,
						url: "/pagesB/my-new-orderform/my-new-orderform",
						src: "/static/my/tianjia.png",
						label: "新建订单",
					},
					{
						id: 5,
						url: "/pagesB/my-train/my-train",
						src: "/static/my/wodepeixun.png",
						label: "我的培训",
					},
					{
						id: 6,
						url: "/pagesB/my-aboutus/my-aboutus",
						src: "/static/my/guanyuwomen.png",
						label: "关于我们",
					}
				],
				date: "",
				visible: false,
				time: {
					year: 2020,
					month: 5
				},
				extraData: [{
						date: '2020-6-3',
						value: '签到',
						dot: true,
						active: true
					},
					{
						date: '2020-6-5',
						value: '未签到',
						dot: true,
						active: false
					},
					{
						date: '2020-7-3',
						value: '签到',
						dot: true,
						active: true
					}
				],
				month: {
					year: 2020,
					month: 6
				}
			}
		},
		watch: {
			date: function(date) {
				console.log('date', date)
				deep: true
			}
		},

		created() {},

		methods: {

			// 签到
			signIn() {
				console.log('显示日历')
				this.visible = true
				// const calendar = this.$refs.calendar
				// 显示日历
				// calendar.visible = true
			},

			/**
			 * @description 跳转
			 *  @param {url} 路径
			 */
			goTo(url) {
				console.log('url', url)
				uni.navigateTo({
					url: url,
				});
			},

			// 退出登录
			out() {
				console.log('退出')
			},

			// 签到
			change() {
				console.log('签到', this.dateVal)
			},


			calendarTap(e) {
				console.log(e);
			},
			monthTap(val) {
				let {
					year,
					month
				} = val;
				this.month = {
					year: year,
					month: month,
				}
				// 此处获取动态的数据，赋值给extraData
				this.extraData = [{
					date: '2020-11-3',
					value: '签到',
					dot: true,
					active: true
				}];
			}

		}
	}
</script>

<style lang="scss" scoped>
	.my {
		width: 100%;
		height: 100%;
		padding: 50rpx;
		background-image: linear-gradient($subject-bgc 0%, $subject-bgc 25%, #fff 0%, #fff 50%);

		.my-top {
			width: 100%;
			height: 286rpx;
			display: flex;
			align-items: center;

			.user {
				flex: 1;

				.user-signIn {
					font-size: 32rpx;
					color: rgba(255, 255, 255, 0.9);
					position: absolute;
					top: 0;
					left: 54rpx;
				}

				.user-name {
					color: #ffffff;
					font-size: 56rpx;
					line-height: 90rpx;
				}

				.user-occupation {
					font-size: 28rpx;
					color: rgba(255, 255, 255, 0.8);
				}

				.user-photo {
					width: 132rpx;
					height: 132rpx;
					float: right;
					border-radius: 50%;
				}
			}
		}

		.my-main {
			// height: 100%;

			.list {

				.item {
					height: 86rpx;
					font-size: 32rpx;
					line-height: 86rpx;
					color: rgba(0, 0, 0, 0.68);
					position: relative;
					padding-left: 54rpx;
					border-bottom: 1rpx solid rgba(204, 204, 204, 0.2);

					.icon {
						width: 32rpx;
						height: 32rpx;
						position: absolute;
						top: 30%;
						left: 4rpx;
					}

					.image {
						width: 32rpx;
						height: 32rpx;
						position: absolute;
						top: 30%;
						right: 0;
					}
				}

			}
		}

		// 点击退出
		.my-foot {
			height: 92rpx;
			padding-top: 50rpx;

			/deep/.cl-button {
				width: 100%;
			}

			/deep/ .cl-button.cl-button--info {
				background-color: #ececec;
				border-color: #ececec;

				.cl-button__text {
					color: #767676;
					font-size: 28rpx;
				}
			}

			// 点击时
			/deep/ .cl-button.cl-button--info.button-hover {
				background-color: rgba(197, 201, 209, 0.8);
			}

			.out-btn {
				width: 100%;
				color: #767676;
				// background-color: #ececec;
			}
		}

		.cl-calendar {
			height: 500rpx;
		}


		.calendar {
			/deep/.day {
				width: 44rpx;
				height: 44rpx;
				line-height: 44rpx;
			}

			/deep/ .content {
				width: 100%;
			}

			/deep/ .flex-column {
				height: 88rpx;
			}

			/deep/ .week {
				margin: 0 0 20rpx 0;
			}


		}
	}

	/deep/ .cl-popup__wrapper {
		padding: 0 0 86rpx 0;
	}
</style>
